<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>消息提醒</title>
    <link rel="stylesheet" type="text/css" href="../css/mview.css?v=20230607112">
    <script type="text/javascript" src="../js/mview.js?v=2023060713"></script>
    <script type="text/javascript" src="../js/easy.qrcode.min.js?v=2023060713"></script>
    <script type="text/javascript" src="https://duoyue.moreqifu.cn/assets/libs/jquery/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/c/font_4109983_xy3xapfvore.css">
    <link rel="stylesheet" type="text/css" href="../libs/colorpicker/spectrum.min.css">
    <script type="text/javascript" src="../libs/colorpicker/spectrum.min.js"></script>
</head>

<body>
    <div class="m-card m-mb-1">
        <div class="m-card-header header-bottom">二维码生成</div>
        <div class="m-card-body">
            <div class="m-qrcode-cotainer">
                <div class="m-qrcode-edit">
                    <div class="m-form-item">
                        <label>链接地址:</label>
                        <input class="m-input" value="" placeholder="请输入二维码内容" id="mQrcodeText" onchange="qrcodeChange(this);">
                    </div>
                    <div class="m-form-item">
                        <label>LOGO:</label>
                        <div>
                            <a href="javascript:;" class="m-file" style="float:left;margin-left: 0px;">
                                <font>选择</font>
                                <input type="file" name="qrcode_logo" id="qrcode_logo" onchange="choiceQrcodeLogo()">
                            </a>
                            <div class="m-file-images" id="mqrcodeRecommend">
                                <div id="5832723"><img src="https://meihua.oss-cn-hangzhou.aliyuncs.com/cli/images/beautify/new/logo/%E5%BE%AE%E4%BF%A1-0210.png" class="m-file-image"></div>
                                <div id="5832723"><img src="https://meihua.oss-cn-hangzhou.aliyuncs.com/cli/images/beautify/new/logo/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1-0210.png" class="m-file-image"></div>
                                <div id="5832723"><img src="https://meihua.oss-cn-hangzhou.aliyuncs.com/cli/images/beautify/new/logo/%E5%B0%8F%E7%A8%8B%E5%BA%8F-0210.png" class="m-file-image"></div>
                                <div id="5832723"><img src="https://meihua.oss-cn-hangzhou.aliyuncs.com/cli/images/beautify/new/logo/%E5%BE%AE%E4%BF%A1%E6%94%AF%E4%BB%98-0210.png" class="m-file-image"></div>
                                <div id="5832723"><img src="https://meihua.oss-cn-hangzhou.aliyuncs.com/cli/images/beautify/new/logo/%E6%8A%96%E9%9F%B3-0210.png" class="m-file-image"></div>
                                <div id="5832723"><img src="https://meihua.oss-cn-hangzhou.aliyuncs.com/cli/images/beautify/new/logo/%E5%BE%AE%E4%BF%A1%20-0210.png" class="m-file-image"></div>
                                <div id="5832723"><img src="https://meihua.oss-cn-hangzhou.aliyuncs.com/cli/images/beautify/new/logo/%E6%94%AF%E4%BB%98%E5%AE%9D-0210.png" class="m-file-image"></div>
                                <div id="5832723"><img src="https://meihua.oss-cn-hangzhou.aliyuncs.com/cli/images/beautify/new/logo/%E6%B7%98%E5%AE%9D-0210.png" class="m-file-image"></div>
                            </div>
                        </div>
                    </div>
                    <div class="m-form-item m-gap-2">
                        <div class="m-col-4">
                            <label>二维码大小</label>
                            <select class="m-select" onchange="qrcodeChange(this);" id="mQrcodeSize">
                                <option value="300">300x300</option>
                                <option value="500" selected>500x500</option>
                                <option value="800">800x800</option>
                                <option value="1000">1000x1000</option>
                                <option value="2000">2000x2000</option>
                            </select>
                        </div>
                        <div class="m-col-4">
                            <label>容错率</label>
                            <select class="m-select" onchange="qrcodeChange(this);" id="mQrcodeCorrectLevel">
                                <option value="L">7%</option>
                                <option value="M">15%</option>
                                <option value="Q">25%</option>
                                <option value="H" selected>30%</option>
                            </select>
                        </div>
                        <div class="m-col-4">
                            <label>码点形状:</label>
                            <select class="m-select" onchange="qrcodeChange(this);" id="mQrcodeDotScale">
                                <option value="1">默认形状</option>
                                <option value="0.6">企微形状</option>
                                <option value="0.4">小点形状</option>
                            </select>
                        </div>
                    </div>
                    <div class="m-form-item m-gap-2">
                        <div class="m-col-4">
                            <label>二维码颜色</label>
                            <input type="text" class="m-color-pickder" placeholder="请输入颜色" id="mQrcodeColor"  onchange="qrcodeChange(this);">
                        </div>
                        <div class="m-col-4">
                            <label>背景颜色</label>
                            <input type="text" class="m-color-pickder" placeholder="请输入颜色" id="mQrcodeBackgroundColor"  onchange="qrcodeChange(this);">
                        </div>
                        <div class="m-col-4">
                            <label>码边距</label>
                            <select class="m-select" onchange="qrcodeChange(this);" id="mQrcodeQuietZone">
                                <option value="1">1个色块</option>
                                <option value="2" selected>2个色块</option>
                                <option value="3">3个色块</option>
                                <option value="4">4个色块</option>
                            </select>
                        </div>
                    </div>
                    <div class="m-form-item m-gap-2">
                        <div class="m-col-4">
                            <label>码外眼颜色</label>
                            <input type="text" class="m-color-pickder" placeholder="请输入颜色" id="mQrcodePO"  onchange="qrcodeChange(this);">
                        </div>
                        <div class="m-col-4">
                            <label>码内眼颜色</label>
                            <input type="text" class="m-color-pickder" placeholder="请输入颜色" id="mQrcodePI"  onchange="qrcodeChange(this);">
                        </div>
                    </div>
                </div>
                <div class="m-qrcode-preview">
                    <div id="mQrcodePreview" class="m-qrcode-image"></div>
                    <div class="m-form-item" style="justify-content: center;">
                        <div class="m-form-btn m-mr-1" onclick="downloadQrcode('#mQrcodePreview');">下载二维码</div>
                        <div class="m-form-btn m-btn-dark" onclick="clearSetting();">清除样式</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 文档地址: https://github.com/ushelp/EasyQRCodeJS -->
    <script type="text/javascript" src="../js/mview.qrcode.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            mQrcodeOptions.text = "https://wailian1.cn";
            mQrcodeGenerate();
        });
    </script>
</body>
</html>